<template>
  <div>
    <a-modal
      :maskClosable="maskClosable"
      v-model="show_model"
      :title="title"
      :afterClose="afterClose"
      on-ok="handleOk"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> {{ cancelText }} </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleOk"
        >
          {{ confirmText }}
        </a-button>
      </template>
      <slot>
        <div style="height: 100px"></div>
      </slot>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      show_model: false,
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "title",
    },
    cancelText: {
      type: String,
      default: "Cancel",
    },
    confirmText: {
      type: String,
      default: "Confirm",
    },
    maskClosable: {
      type: Boolean,
      default: false,
    },
    handleOk: {
      type: Function,
      default: function () {
        this.loading = true;
        setTimeout(() => {
          this.$emit("input", false);
          this.loading = false;
        }, 3000);
      },
    },
  },
  model: {
    prop: "visible",
    event: "input",
  },
  watch: {
    visible: function (val) {
      this.show_model = val;
    },
  },
  created() {
    this.show_model = this.visible;
  },
  methods: {
    handleCancel() {
      // this.visible = false
      this.$emit("input", false);
    },
    afterClose() {
      this.$emit("input", false);
    },
  },
};
</script>
